<script setup>
import {computed, ref} from "vue";
import {apiChangePassword} from "@/api/user";
import {delay} from "@/utils";
import {toast} from "@/hook/toast";
import {ElNotification} from "element-plus";

const visible = ref(false)
const formData = ref({
  mobile: '',
  password: '',
  confirmPassword: '',
})
const formRef = ref(null)
const rules = computed(() => {
  return {
    mobile: [
      {
        required: true,
        message: '请输入手机号',
        trigger: 'change'
      }
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'change'
      }
    ],
    confirmPassword: [
      {
        required: true,
        message: '请确认密码',
        trigger: 'change'
      },
      {
        validator: (_, value, cb) => {
          const {password} = formData.value
          if (!password) return cb(new Error('请先输入密码'))
          if (!value) return cb(new Error('请确认密码'));
          if (password !== value) return cb(new Error('两次密码不一致'))
          return cb()
        }
      }
    ]
  }
})
const loading = ref(false)
const emits = defineEmits(['success'])

function open(mobile) {
  visible.value = true
  // formData.value.mobile = mobile
}

function confirmHandle() {
  formRef.value?.validate(async v => {
    if (!v) return
    loading.value = true
    const {mobile, password} = formData.value
    const resp = await apiChangePassword({
      mobile,
      newpassword: password,
    })
    await delay(300)
    const {code, msg} = resp
    if (code !== 1) return toast({title: msg})
    visible.value = false
    loading.value = false
    ElNotification.success({
      title: 'Success',
      message: '修改成功,请重新登录',
      showClose: false,
      duration: 1500,
      onClose: () => {
        emits('success')
      }
    })
  })
}

function resetForm() {
  formRef.value?.resetFields()
}

function cancelHandle() {
  visible.value = false
}

function handClose() {
  visible.value = false
}

defineExpose({
  open,
})
</script>

<template>
  <el-dialog v-model="visible"
             title="修改密码"
             width="420px"
             align-center
             @closed="resetForm"
             @close="handClose"
  >
    <el-form :model="formData"
             ref="formRef"
             :rules="rules"
             label-position="left"
             label-width="80px"
    >
      <el-form-item label="手机号" prop="mobile">
        <el-input placeholder="请输入您的手机号" v-model="formData.mobile"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" auto-complete="new-password" v-model="formData.password" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="formData.confirmPassword" placeholder="请确认密码"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-space>
        <el-button type="info" @click="cancelHandle">取消操作</el-button>
        <el-button :loading="loading" type="primary" @click="confirmHandle">确认修改</el-button>
      </el-space>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
